import React from "react";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import ThePagination from "@/components/ThePagination";
import { apiGetuserintegralRecord, apiGetuserintegralentryTypeList, apiGetuserintegralentryexport } from '@/request/dataStatics'
import { exportSheetTable } from "@/utils/exportTable";
import TheQueryForm from "@/components/TheQueryForm";
import TheTableExtend from "@/components/TheTableExtend";
import "@/views/dataStatics/style/style.less"
import _ from "lodash";
import moment from 'moment';

let options = [];
class Hahadou extends React.Component {
  constructor(props) {
    super(props);
    this.queryFormRef = React.createRef();

    this.state = {
      down_loading: false,

      columns: [
        {
          title: "事件id",
          dataIndex: "integralRecordId",
          key: "integralRecordId",
        },
        {
          title: "用户id",
          dataIndex: "memberId",
          key: "memberId",
        },
        {
          title: "用户昵称",
          dataIndex: "nickName",
          key: "nickName",
        },
        {
          title: "用户手机号",
          dataIndex: "mobile",
          key: "mobile",
        },
        {
          title: "类型",
          dataIndex: "type",
          key: "type",
          render: (text, record) => {
            if (record.integralNum >= 0) {
              return text = '收入'
            } else {
              return text = '支出'
            }
          },
        },
        {
          title: "条目类型",
          dataIndex: "entryTypeName",
          key: "entryTypeName",
        },
        {
          title: "哈哈豆",
          dataIndex: "integralNum",
          key: "integralNum",
          render: (text, record) => {
            if (text >= 0) {
              return '+' + text
            } else {
              return text
            }
          },
        },
        {
          title: "时间",
          dataIndex: "createTime",
          key: "createTime",
        },

      ],
      dataSource: [],
      pageData: {
        current: 1,
        size: 10,
      },
      total: 0,
      searchValue: {},
      newColumns: [],
      form_show: true,
      searchOption: [
        {
          field: "memberId",
          label: "",
          placeholder: "请输入用户ID",
          required: false,
          type: "Input",
          defaultValue: "",
        },
        {
          field: "nickName",
          label: "",
          placeholder: "请输入昵称",
          required: false,
          rules: [],
          type: "Input",
          defaultValue: "",
        },
        {
          field: "mobile",
          label: "",
          placeholder: " 请输入手机号",
          required: false,
          rules: [],
          type: "Input",
          defaultValue: "",
        },
        {
          field: "type",
          label: "",
          placeholder: "请选择类型",
          required: false,
          rules: [],
          type: "Select",
          options: [
            { value: true, label: "收入" },
            { value: false, label: "支出" },

          ],
          defaultValue: "",
        },
        {
          field: "entryType",
          label: "",
          placeholder: "请选择条目类型",
          required: false,
          rules: [],
          type: "Select",
          options: options,
          defaultValue: "",
        },
        {
          field: "time",
          label: "",
          placeholder: "",
          required: false,
          rules: [],
          type: "RangePicker",
          defaultValue: "",
        },
      ],
      queryForm: {},
    };
  }
  async componentDidMount() {
    this.onColumnsFilter(this.state.columns);
    this.getData();
    this.getEntryTypeList()
  }
  getData = async (values) => {
    this.setState(
      {
        queryForm: values === undefined ? this.state.queryForm : { ...values },
      },
      async () => {
        let param = {
          ...this.state.queryForm,
          ...this.state.pageData
        };
        if (!!param.time) {
          param.begin = moment(this.state.queryForm.time[0]).format("YYYY-MM-DD 00:00:00");
          param.end = moment(this.state.queryForm.time[1]).format("YYYY-MM-DD 23:59:59");
          delete (param.time)
        }
        let res = await apiGetuserintegralRecord(param);
        if (res.code === 0 && res.data) {
          this.setState({
            dataSource: res.data.records,
            pageData: { current: res.data.current, size: res.data.size },
            total: res.data.total,
          });
        }
      }
    );
  };
  getEntryTypeList = async () => {
    let res = await apiGetuserintegralentryTypeList();
    if (res.code === 0 && res.data) {
      res.data.forEach(item => {
        options.push({
          label: item.entryTypeName,
          value: item.entryType
        })
      })

    }
  };
  pageChange = (current, size) => {
    console.log(current, size, 'sssssssssss');
    this.setState(
      {
        pageData: {
          current,
          size,
        },
      },
      () => {
        this.getData();
      }
    );
  };
  getEntryType(value) {
    let label = ''
    switch (value) {
      case 1:
        label = '购买下单';
        break;
      case 2:
        label = '退款成功';
        break;
      case 3:
        label = '签到奖励';
        break
      case 4:
        label = '过期';
        break
      case 5:
        label = '下单抵扣';
        break
      default:
        label = '--';
    }
    return label;
  }
  //表格导出
  async toExportTable() {
    this.setState({ down_loading: true });
    let param = this.state.queryForm;

    if (!!param.time) {
      param.begin = moment(this.state.queryForm.time[0]).format("YYYY-MM-DD 00:00:00");
      param.end = moment(this.state.queryForm.time[1]).format("YYYY-MM-DD 23:59:59")
      delete (param.time)
    }
    await apiGetuserintegralentryexport(param)
      .then((res) => {
        if (res.code === 0 && res.data.length > 0) {
          let tH_data = [
            {
              title: "哈哈豆记录",
              prop: "",
              children: [
                { prop: 'integralRecordId', title: '事件id' },
                { prop: 'memberId', title: '用户id' },
                { prop: 'nickName', title: '用户昵称' },
                { prop: 'mobile', title: '用户手机号' },
                { prop: 'type', title: '类型' },
                { prop: 'entryTypeName', title: '条目类型' },
                { prop: 'integralNum', title: '哈哈豆' },
                { prop: 'createTime', title: '时间' },
              ],
            },
          ];
          let tB_data = res.data.map((item) => {
            return {
              integralRecordId: item.integralRecordId,
              memberId: item.memberId,
              nickName: item.nickName,
              mobile: item.mobile,
              type: item.integralNum >= 0 ? "收入" : "支出",
              entryTypeName: item.entryTypeName,
              integralNum: item.integralNum >= 0 ? '+' + item.integralNum : item.integralNum,
              createTime: item.createTime,
            };
          });

          this.setState({ down_loading: false });
          exportSheetTable({
            fileName: "哈哈豆记录",
            tH_data: tH_data,
            tB_data: tB_data,
            isSheet: true,
            merge: true,
            mergeProp: [
              "integralRecordId",
              "memberId",
              "nickName",
              "mobile",
              "type",
              "entryType",
              "integralNum",
              "createTime"
            ],
          });
        } else {
          React.$message({
            type: "warning",
            content: "导出操作失败,请重试",
          });
          this.setState({ down_loading: false });
        }
      })
      .catch((err) => {
        React.$message({
          type: "warning",
          content: "导出操作失败,请重试",
        });
        this.setState({ down_loading: false });
      });
  }
  onReset() {
    this.setState(
      {
        queryForm: {},
      },
      () => {
        this.getData();
      }
    );
  }
  onColumnsFilter(value) {
    this.setState({
      newColumns: value,
    });
  }
  onFormSearch(values) {
    this.setState(
      {
        pageData: { current: 1, size: 10 },
      },
      () => {
        this.getData(values);
      }
    );
  }
  render() {
    const {
      columns,
      dataSource,
      total,
      down_loading,
      form_show,
      searchOption,
      newColumns,
      pageData,
    } = this.state;
    console.log(pageData, '4567');
    return (
      <div className={"p-layout-box commodity-content"}>
        {/* <SearchHeader history={this.props.history} getValue={this.getValue} toExport={(e) => this.toExportTable(e)} loading={down_loading} /> */}
        <TheQueryForm
          ref={(ref) => (this.queryFormRef = ref)}
          show={form_show}
          option={searchOption}
          onReset={() => this.onReset()}
          onGetValues={(values) => this.onFormSearch(values)}
        ></TheQueryForm>
        <TheTableExtend
          columns={columns}
          onFormTrigger={() =>
            this.setState({ form_show: !this.state.form_show })
          }
          onTableRefresh={() => this.getData()}
          onColumnsFilter={(value) => this.onColumnsFilter(value)}
        >
          <TheButton
            size="middle"
            type="default"
            haspermi={["mall:list:exportGoodsBySku"]}
            onClick={() => this.toExportTable()}
            loading={this.props.loading}
          >
            导出
          </TheButton>
        </TheTableExtend>

        <TheTable

          columns={newColumns}
          dataSource={dataSource}
        />
        <ThePagination
          pageNo={pageData.current}
          pageSize={pageData.size}
          total={total}
          pageChange={this.pageChange}
        />

      </div>
    );
  }
}

export default Hahadou;
